<script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import UserManagementPage from '@/view/userManagement.vue'
  import CampusCardManagementPage from '@/view/campusCardManagement.vue'
  import VendingMachinePage from '@/view/vendingMachine.vue'
  
  const showUserManagement = ref('') // 初始设为空字符串
  
  // 更新页面显示的函数
  const updatePageDisplay = () => {
    const urlParams = new URLSearchParams(window.location.search)
    showUserManagement.value = urlParams.get('page') || '' // 无参数时设为空字符串
  }
  
  onMounted(() => {
    updatePageDisplay() // 初始化时执行一次
    
    // 添加事件监听器，响应浏览器前进/后退
    window.addEventListener('popstate', updatePageDisplay)
  })
  
  onUnmounted(() => {
    // 组件卸载时移除事件监听
    window.removeEventListener('popstate', updatePageDisplay)
  })
  </script>
  
  <template>
    <!-- 无参数或page=userManagement时显示用户管理 -->
    <UserManagementPage v-if="showUserManagement === '' || showUserManagement === 'userManagement'" />
    
    <!-- page=campusCardManagement时显示校园卡管理 -->
    <CampusCardManagementPage v-else-if="showUserManagement === 'campusCardManagement'" />

    <!-- page=vendingMachine时显示售货机管理 -->
    <VendingMachinePage v-else-if="showUserManagement === 'vendingMachine'" />
    
    <!-- 可选的：处理无效参数的情况 -->
    <div v-else class="error-page">
      无效的页面参数: {{ showUserManagement }}
    </div>
  </template>
  
  <style>
  .error-page {
    padding: 20px;
    color: red;
    font-size: 16px;
    text-align: center;
  }
  </style>